<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <p class="a">1</p>
    <p class="a">2</p>
    <p>3</p>
    <div>
        <span>1</span>
        <span>2</span>
    </div>

    <input type="text" name="a">
    <input type="text" name="a">

    <script>

        // document.getElementById()  
        // getElementsByTagName()    tag 标签     得到的是一个伪数组
        // getElementsByClassName()  class 名     得到的是一个伪数组
        // getElementsByName()   有些浏览器兼容    得到的是一个伪数组

        // ES6新增的方法
        //   querySelectorAll()   支持选择器的写法  得到的是一个伪数组
        //   querySelector()  支持选择器的写法 得到的是一个元素

        var obj = document.getElementsByTagName('p') ;
        console.log(obj) ;
        obj[0].style.color = 'red' ;
        var oDivs = document.getElementsByTagName('div') ;
        console.log(oDivs) ;
        oDivs[0].style.color = 'blue' ;


        var oAs = document.getElementsByClassName('a') ;
        console.log(oAs) ;

        var oInps = document.getElementsByName('a') ;
        console.log(oInps) ;

        // query 查询   selector 选择器
        var oPs = document.querySelectorAll('p') ;
        console.log(oPs) ;

        var oPs = document.querySelectorAll('.a') ;
        console.log(oPs) ;

        var oSpan = document.querySelectorAll('div span') ;
        console.log(oSpan);

        var oSpan1 = document.querySelector('div span:last-child') ;
        console.log(oSpan1);


    </script>
    
</body>
</html>